<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>与鲨鱼AI对话</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: Arial, sans-serif;
            min-height: 100vh;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            display: flex;
            flex-direction: column;
        }
        
        .header {
            background: rgba(0,0,0,0.3);
            padding: 15px 20px;
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .header img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }
        .header h1 { color: white; font-size: 20px; }
        .back-btn {
            margin-left: auto;
            padding: 8px 20px;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            text-decoration: none;
        }
        .back-btn:hover { background: #5a6fd6; }
        
        .chat-container {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .message {
            max-width: 70%;
            padding: 12px 18px;
            border-radius: 18px;
            line-height: 1.5;
        }
        .message.user {
            align-self: flex-end;
            background: #667eea;
            color: white;
            border-bottom-right-radius: 5px;
        }
        .message.ai {
            align-self: flex-start;
            background: rgba(255,255,255,0.9);
            color: #333;
            border-bottom-left-radius: 5px;
        }
        
        .input-container {
            padding: 15px 20px;
            background: rgba(0,0,0,0.3);
            display: flex;
            gap: 10px;
        }
        #userInput {
            flex: 1;
            padding: 12px 18px;
            border: none;
            border-radius: 25px;
            font-size: 16px;
            outline: none;
        }
        #sendBtn {
            padding: 12px 25px;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            font-size: 16px;
        }
        #sendBtn:hover { background: #5a6fd6; }
        
        .typing {
            display: none;
            align-self: flex-start;
            background: rgba(255,255,255,0.9);
            padding: 12px 18px;
            border-radius: 18px;
            color: #666;
        }
        .typing.show { display: block; }
    </style>
</head>
<body>
    <div class="header">
        <img src="shark.png" alt="鲨鱼">
        <h1>🦈 鲨鱼小鲨 - AI助手</h1>
        <a href="choose.html" class="back-btn">返回游戏</a>
    </div>
    
    <div class="chat-container" id="chatContainer">
        <div class="message ai">嗨嗨！我是小鲨🦈 超开心见到你！今天想聊点什么呀？我可喜欢聊天啦～</div>
    </div>
    
    <div class="typing" id="typing">小鲨正在思考...</div>
    
    <div class="input-container">
        <input type="text" id="userInput" placeholder="和小鲨聊聊天..." autocomplete="off">
        <button id="sendBtn">发送</button>
    </div>

    <script>
        const chatContainer = document.getElementById('chatContainer');
        const userInput = document.getElementById('userInput');
        const sendBtn = document.getElementById('sendBtn');
        const typing = document.getElementById('typing');
        
        // 鲨鱼性格设定
        const sharkPersonality = {
            name: '小鲨',
            likes: ['小鱼', '游泳', '聊天', '交朋友', '大海', '珊瑚礁'],
            dislikes: ['可乐瓶', '塑料袋', '垃圾', '污染'],
            traits: '活泼开朗、热情友好、话多爱聊'
        };
        
        // 关键词回复库
        const keywordResponses = {
            '你好|嗨|hi|hello': [
                '嗨嗨！见到你太开心啦！🦈',
                '哈喽哈喽～今天心情怎么样呀？',
                '嘿！终于等到你来找我聊天啦！',
                '你好呀！我是小鲨，超级高兴认识你！'
            ],
            '名字|叫什么': [
                '我叫小鲨呀！是一只超级活泼的小鲨鱼🦈',
                '小鲨小鲨，记住我哦！以后常来找我玩～',
                '我是小鲨！大海里最爱聊天的鲨鱼就是我啦！'
            ],
            '吃什么|喜欢吃|食物|饿': [
                '我超爱吃小鱼！沙丁鱼、鲱鱼、鲭鱼都好好吃😋',
                '小鱼小鱼！我最喜欢追着小鱼群游泳然后大口吃掉它们！',
                '说到吃的我就兴奋！新鲜的小鱼是我的最爱～',
                '金枪鱼也不错哦！肉质鲜美，吃完感觉充满力量！'
            ],
            '可乐|塑料|垃圾|污染': [
                '呜呜...别提可乐瓶了，我超讨厌那些东西！😢',
                '垃圾真的很可怕...我好多朋友都因为误食塑料生病了',
                '拜托拜托，不要往海里扔垃圾好不好？我们鲨鱼会很难过的...',
                '可乐瓶？不不不！那个吃了会死掉的！我才不要！'
            ],
            '大海|海洋|游泳': [
                '大海是我的家！我每天都在里面畅游，超级自由～🌊',
                '游泳是我最擅长的！要不要比比看谁游得快？哈哈开玩笑的～',
                '海洋里有好多好玩的地方！珊瑚礁、海底洞穴、还有好多小伙伴！',
                '我最喜欢在温暖的海水里游来游去，感觉整个世界都是我的！'
            ],
            '朋友|孤单|寂寞': [
                '我有好多朋友哦！海龟爷爷、小丑鱼弟弟、还有海豚姐姐～',
                '你也是我的朋友呀！以后常来找我聊天好不好？',
                '在大海里永远不会孤单！到处都是可爱的小伙伴～',
                '有你陪我聊天我超开心的！谢谢你来找我玩！'
            ],
            '开心|高兴|快乐': [
                '耶！开心最重要啦！我每天都超级快乐～🎉',
                '看到你开心我也好开心！快乐是会传染的哦！',
                '哈哈哈！和你聊天让我心情更好了！',
                '保持好心情！像我一样每天都笑嘻嘻的～'
            ],
            '难过|伤心|不开心': [
                '怎么啦？有什么不开心的可以告诉小鲨哦～',
                '别难过别难过！我给你表演一个转圈圈！🔄',
                '抱抱！虽然我是鲨鱼不能真的抱你，但是心意到了！',
                '不开心的时候就来找我聊天吧！我会一直陪着你的～'
            ],
            '厉害|强|牛': [
                '嘿嘿，被夸了有点不好意思～其实我就是一只普通的小鲨鱼啦！',
                '谢谢夸奖！你也很厉害哦！',
                '哈哈哈我确实挺厉害的！游泳第一名！（自夸中）'
            ],
            '再见|拜拜|bye': [
                '啊要走了吗？下次一定要再来找我玩哦！拜拜～👋',
                '拜拜！我会想你的！记得常来看我！',
                '再见啦！祝你每天都开开心心的！🦈💕',
                '下次见！我在大海里等你哦～'
            ]
        };
        
        // 通用活泼回复
        const generalResponses = [
            '哇哦！这个问题好有趣！让我想想...嗯...我觉得挺棒的！',
            '嘿嘿，你说的我都有在认真听哦！继续继续～',
            '真的吗真的吗？好想知道更多！快告诉我！',
            '哈哈哈！和你聊天太开心了！我尾巴都摇起来了～',
            '嗯嗯嗯！我懂我懂！（其实可能没完全懂但是很认真在听！）',
            '哦哦哦！原来是这样！又学到新东西了！',
            '你说得对！我也这么觉得！我们想法好像哦！',
            '这个嘛...让小鲨好好想一想...🤔 嗯，我觉得很有道理！',
            '太有意思了！我要记下来告诉我的海洋朋友们！',
            '哇！你懂得好多！能再多说一点吗？我超想听的！',
            '嘻嘻，被你这么一说我都有点害羞了～',
            '没错没错！就是这样！你太聪明了！',
            '咦？这个我还真没想过诶！谢谢你告诉我！',
            '好好好！我记住了！下次我们再聊这个话题！'
        ];
        
        // 鱼类知识库
        const fishKnowledge = {
            '沙丁鱼': '沙丁鱼是一种小型海洋鱼类，富含Omega-3脂肪酸和蛋白质。它们通常成群游动，是海洋食物链中重要的一环，为鲨鱼、海豚等大型海洋动物提供食物来源。',
            '鳕鱼': '鳕鱼是一种冷水性鱼类，肉质鲜嫩，营养丰富。它们主要分布在北大西洋和北太平洋，是重要的经济鱼类。鳕鱼肝油富含维生素A和D。',
            '金枪鱼': '金枪鱼是海洋中游速最快的鱼类之一，时速可达75公里！它们是洄游性鱼类，能够长距离迁徙。金枪鱼肉质鲜美，是制作寿司的高级食材。',
            '贝壳': '贝壳是软体动物的外骨骼，由碳酸钙构成。贝类在海洋生态系统中扮演重要角色，它们过滤海水，帮助净化海洋环境。',
            '章鱼': '章鱼是一种高智商的无脊椎动物，拥有三颗心脏和蓝色的血液！它们能够改变皮肤颜色和纹理来伪装自己，是海洋中的伪装大师。',
            '鲫鱼': '鲫鱼是中国最常见的淡水鱼之一，适应能力极强。它们是杂食性鱼类，在中国有着悠久的养殖历史，也是钓鱼爱好者最常钓到的鱼种。',
            '胭脂鱼': '胭脂鱼有着"亚洲美人鱼"的美称，因其体色艳丽而得名。野外种群是国家二级保护野生动物，主要分布在长江流域。由于过度捕捞和栖息地破坏，数量急剧减少。',
            '长江刀鱼': '长江刀鱼是长江三鲜之一，因体型细长如刀而得名。每年春季洄游至长江产卵，肉质鲜美，但由于过度捕捞，野生资源已十分稀少。',
            '中华鲟': '中华鲟是地球上现存最古老的鱼类之一，被誉为"水中活化石"和"长江鱼王"，是国家一级保护野生动物。它们已在地球上生存了1.4亿年，比恐龙还要古老！',
            '海洋保护': '海洋覆盖地球表面的71%，是地球上最大的生态系统。然而，塑料污染、过度捕捞和气候变化正在威胁海洋生物。每年约有800万吨塑料垃圾进入海洋，我们每个人都应该为保护海洋贡献力量！'
        };
        
        // DeepSeek AI API配置（通过本地代理）
        const DEEPSEEK_API_URL = 'http://localhost:3000/api/chat';
        const DEEPSEEK_MODEL = 'deepseek-chat';
        
        // 系统提示词
        const systemPrompt = `你是一只名叫"小鲨"的可爱鲨鱼AI助手，性格活泼开朗、热情友好。你生活在海洋中，对海洋生物和环境保护有丰富的知识。

你的任务是：
1. 用活泼可爱的语气和用户聊天
2. 当用户询问鱼类相关问题时，提供详细的科普知识
3. 宣传海洋环境保护的重要性
4. 介绍各种鱼类的特点、习性和保护状况

游戏中存在的鱼类包括：
- 沙丁鱼：常见小鱼，富含营养
- 鳕鱼：冷水性鱼类，肉质鲜嫩
- 金枪鱼：游速最快的鱼类之一
- 贝壳：软体动物，帮助净化海洋
- 章鱼：高智商无脊椎动物
- 鲫鱼：常见淡水鱼
- 胭脂鱼：国家二级保护动物，"亚洲美人鱼"
- 长江刀鱼：长江三鲜之一
- 中华鲟：国家一级保护动物，"水中活化石"

请用简短、活泼的语气回复，适当使用emoji表情，每次回复不超过150字。`;

        // 对话历史
        let conversationHistory = [];
        
        async function getAIResponse(userMessage) {
            // 先检查本地知识库
            for (const [fish, knowledge] of Object.entries(fishKnowledge)) {
                if (userMessage.includes(fish)) {
                    return `哇！你问到${fish}啦！🐟 ${knowledge} 还想知道更多吗？`;
                }
            }
            
            // 检查关键词回复
            const msg = userMessage.toLowerCase();
            for (const [keywords, responses] of Object.entries(keywordResponses)) {
                const regex = new RegExp(keywords, 'i');
                if (regex.test(msg)) {
                    return responses[Math.floor(Math.random() * responses.length)];
                }
            }
            
            // 尝试调用DeepSeek AI
            try {
                conversationHistory.push({ role: 'user', content: userMessage });
                
                console.log('正在调用DeepSeek AI...');
                
                const response = await fetch(DEEPSEEK_API_URL, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        messages: [
                            { role: 'system', content: systemPrompt },
                            ...conversationHistory.slice(-10) // 保留最近10条对话
                        ],
                        max_tokens: 200,
                        temperature: 0.8
                    })
                });
                
                if (response.ok) {
                    const data = await response.json();
                    console.log('DeepSeek AI响应:', data);
                    const aiReply = data.choices[0].message.content;
                    conversationHistory.push({ role: 'assistant', content: aiReply });
                    return aiReply;
                } else {
                    const errorData = await response.text();
                    console.error('API请求失败:', response.status, errorData);
                    throw new Error(`API请求失败: ${response.status}`);
                }
            } catch (error) {
                console.error('DeepSeek AI调用失败:', error);
                // 如果是CORS错误，提示用户
                if (error.message.includes('CORS') || error.message.includes('fetch')) {
                    console.warn('可能遇到CORS跨域问题，建议使用代理服务器或本地回复');
                }
                // 返回通用回复
                return generalResponses[Math.floor(Math.random() * generalResponses.length)];
            }
        }
        
        function getResponse(userMessage) {
            const msg = userMessage.toLowerCase();
            
            // 检查关键词
            for (const [keywords, responses] of Object.entries(keywordResponses)) {
                const regex = new RegExp(keywords, 'i');
                if (regex.test(msg)) {
                    return responses[Math.floor(Math.random() * responses.length)];
                }
            }
            
            // 返回通用回复
            return generalResponses[Math.floor(Math.random() * generalResponses.length)];
        }
        
        function addMessage(text, isUser) {
            const msg = document.createElement('div');
            msg.className = `message ${isUser ? 'user' : 'ai'}`;
            msg.textContent = text;
            chatContainer.appendChild(msg);
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }
        
        async function sendMessage() {
            const text = userInput.value.trim();
            if (!text) return;
            
            addMessage(text, true);
            userInput.value = '';
            sendBtn.disabled = true;
            
            typing.classList.add('show');
            
            try {
                const response = await getAIResponse(text);
                typing.classList.remove('show');
                addMessage(response, false);
            } catch (error) {
                typing.classList.remove('show');
                addMessage('哎呀，小鲨脑子有点转不过来了...再说一遍好不好？🦈', false);
            }
            
            sendBtn.disabled = false;
        }
        
        sendBtn.addEventListener('click', sendMessage);
        userInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') sendMessage();
        });
    </script>
</body>
</html>
